<template>
  <div>
    <div class="container pt-5 pb-5">
      <p class="fs-32 text-center mb-5">中日国际班</p>
      <div class="bg-f7 p-5 mb-5">
        <p class="color-blue fs-24">大专100%日本留学，推荐就业。 大学期间可选择半工半读。</p>
        <p class="fs-18">日本大学培养模式，外教参与授课，毕业赴日本升学就职</p>
        <p class="fs-18">北海道文教大学、札幌国际大学、日本医疗大学三校直招</p>
        <p class="fs-18">全程负责升学就业指导，公费奖学金赴日，保障高薪工作</p>
        <p class="fs-18">赴日学习旅行，与日本大学深度交流，校方提供全程费用</p>
      </div>
      <div class="row pt-4 pb-5">
        <div class="col-md-3 col-sm-6 mb-4 class-img" v-for="index in 8" :key="index">
          <img
            :src="require(`../assets/images/class${index}.png`)"
            class="img-responsive w-100 "
            alt
          />
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">合作院校</div>
          <div class="fs-30">COOPERATIVE INSTITUTIONS</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="swiper-box w-100 mb-5">
        <div class="swiper-container-three">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="container d-flex">
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/0.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/1.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/2.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/3.jpg" class="img-responsive w-100" alt />
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="container d-flex">
                <div class="col-md-3 col-sm-4 d-md-none">
                  <img src="../assets/images/3.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/4.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/5.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/6.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/7.jpg" class="img-responsive w-100" alt />
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="container d-flex">
                <div class="col-md-3 col-sm-4 d-md-none">
                  <img src="../assets/images/6.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-md-none">
                  <img src="../assets/images/7.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/8.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/9.jpg" class="img-responsive w-100" alt />
                </div>
                <div class="col-md-3 col-sm-4 d-none d-md-block">
                  <img src="../assets/images/10.jpg" class="img-responsive w-100" alt />
                </div>
              </div>
            </div>
            <div class="swiper-slide d-md-none">
              <div class="container d-flex">
                <div class="col-md-3 col-sm-4">
                  <img src="../assets/images/10.jpg" class="img-responsive w-100" alt />
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {};
  },
  mounted() {
    new Swiper(".swiper-container-three", {
      autoplay: true,
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  }
};
</script>

<style lang="scss">
@import "../assets/scss/style.scss";

@media screen and (max-width: 768px) {
  .col-sm-6 {
    width: 50% !important;
  }

  .swiper-container-three {
  position: relative;
  img {
    width: 6.75rem !important;
    margin: 0.1875rem 0;
    box-shadow: 0px 0px 0.3125rem 0px rgba(0, 0, 0, 0.1);
  }
  .swiper-button-next {
    color: map-get($colors, "blue");
    --swiper-navigation-size: 0.875rem; /* 设置按钮大小 */
    margin-right: 0 !important;
  }
  .swiper-button-prev {
    color: map-get($colors, "blue");
    --swiper-navigation-size: 0.875rem; /* 设置按钮大小 */
    margin-left: 0 !important;
  }
}
  
}
.swiper-container-three {
  position: relative;
  img {
    margin: 10px 0;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }
  .swiper-button-next {
    color: map-get($colors, "blue");
    --swiper-navigation-size: 28px; /* 设置按钮大小 */
    margin-right: 5%;
  }
  .swiper-button-prev {
    color: map-get($colors, "blue");
    --swiper-navigation-size: 28px; /* 设置按钮大小 */
    margin-left: 5%;
  }
}

.class-img{
    overflow: hidden;
    img:hover {
        transform: scale(1.5);
        transition: all 0.7s;
    }
}
</style>